.top {
    width: 100%;
    padding: 10px 12px;
    padding-bottom: 0;
    box-sizing: border-box;

    .header {
        width: 100%;
        height: 100%;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        background: white;
        padding: 10px;
        box-sizing: border-box;

        .search {

            .mr10 {
                margin-right: 5px;
                width: 120px;
            }

            .input-with-select {
                width: 150px;
                margin-right: 5px;
            }

            .btn {
                display: flex;
                align-items: center;
    
                i {
                    margin-right: 5px;
                }
            }
        }
    }
}

.main {
    display: flex;
    flex-direction: column;
    flex: 1;
    .demo-tabs {
        display: flex;
        flex-direction: column;
        flex: 1;

        :deep(.el-tabs__content) {
            display: flex;
            flex-direction: column;
            flex: 1;
            // padding: 12px;

            .el-tab-pane {
                flex: 1;
                height: 100%;
                display: flex;
                flex-direction: column;
            }
        }

        :deep(.el-tabs__header) {
            margin: 0;
            padding: 12px 0;
            // padding-right: 1px;
            // background-color: #fff;

            // .el-tabs__nav {
            //     .el-tabs__item {
            //         color: #000;
            //         border: none;

            //         &::before {
            //             content: '';
            //             width: 3px;
            //             height: 40px;
            //             position: absolute;
            //             left: 2px;
            //             background-color: #007cff;
            //             opacity: 0;
            //         }
            //     }

            //     .el-tabs__item:hover {
            //         color: #007cff;
            //     }

            //     .is-active {
            //         color: #007cff;
            //         background: #EAEFF8;

            //         &::before {
            //             content: '';
            //             opacity: 1;
            //             transition: all 0.5s;
            //         }
            //     }
            // }
        }
    }

}

.table {
    margin: 10px 0;
    flex: 1;
    position: relative;
    .btns {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    span {
        display: inline-block;
        height: 22px;
        line-height: 22px;
        font-weight: 400;
        border-radius: 2px;
        font-size: 12px;
        padding: 0 10px;
    }

    .state1 {
        color: #a06eff;
        border-color: #a06eff;
        background-color: #f3ebff;
    }

    .state2 {
        color: #00c0c0;
        border-color: #00c0c0;
        background-color: #ebf6f6;
    }

    .state3 {
        color: #007cff;
        border-color: #007cff;
        background-color: #eaeff8;
    }

    .state4 {
        color: #122954;
        border-color: #122954;
        background-color: #eaecee;
    }
}

.footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
